<!--
 * @Author: your name
 * @Date: 2020-07-01 21:50:36
 * @LastEditTime: 2020-07-05 00:38:48
 * @LastEditors: Please set LastEditors
 * @Description: 京东移动端商城首页
 * @FilePath: \移动web\MobileWeb\day1\jdM\index.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name = "viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>京东移动站-首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 版心 -->
    <!-- 
        1.最大宽度设置成了640px
        2.设计稿psd的尺寸就是640px
        3.目的：当设备的尺寸比设计稿不至于失真
        4.640px的尺寸设计稿的原因：根据当前主要流行的设
        备尺寸有关系iphone4,4s尺寸320px
        5.750px的设计稿：参考原型iphone6 尺寸720px
        6.最小宽度320px 保证最小的宽度320px不让页面错乱
     -->
     <div class="jd_container">
         <!-- 顶部搜索 -->
         <header class="jd_search">
             <div class="jd_search_box">
                 <a href="#" class="red icon_logo"></a>
                 <form action="#">
                     <span class="icon_search"></span>
                     <input type="search" placeholder="占位符">
                 </form>
                 <a href="#" class="login">登录</a>
             </div>
         </header>
         <!-- 轮播图 -->
         <div class="jd_banner">
             <ul>
                 <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                 <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
             </ul>
             <ul>
                 <li class="now"></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
             </ul>
         </div>
         <!-- 导航栏 -->
         <nav class="jd_nav">
            <ul class="clearFix">
                <li><a href="#"><img src="images/nav0.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav1.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav2.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav3.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav4.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav5.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav6.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav7.png" alt=""><p>分类</p></a></li>
            </ul>
        </nav>
         <!-- 产品区块 -->
         <div class="jd_product">
             <section class="jd_product_box sk">
                 <div class="tit nb">
                     <div class="f_left">
                         <span class="icon"></span>
                         <span class="name">掌上描述</span>
                         <div class="time">
                             <span>0</span>
                             <span>0</span>
                             <span>:</span>
                             <span>0</span>
                             <span>0</span>
                             <span>:</span>
                             <span>0</span>
                             <span>0</span>
                         </div>
                     </div>
                     <div class="f_right"><a href="#" class="m_r10">更多&gt;</a></div>
                 </div>
                 <div class="con">
                     <ul class="pro clearFix">
                         <li>
                             <a href="#"><img src="images/detail01.jpg" alt=""></a>
                             <p class="nowPrice">&yen;10.00</p>
                             <p class="oldPrice">&yen;100.00</p>
                         </li>
                         <li>
                             <a href="#"><img src="images/detail02.jpg" alt=""></a>
                             <p class="nowPrice">&yen;10.00</p>
                             <p class="oldPrice">&yen;100.00</p>
                         </li>
                         <li>
                             <a href="#"><img src="images/detail01.jpg" alt=""></a>
                             <p class="nowPrice">&yen;10.00</p>
                             <p class="oldPrice">&yen;100.00</p>
                         </li>
                     </ul>
                 </div>
             </section>
             <section class="jd_product_box">
                 <div class="tit">
                     <h3>京东超市</h3>
                 </div>
                 <div class="con clearFix">
                     <a href="#" class="w_50p f_left br">
                     <img src="images/cp1.jpg" alt=""></a>
                     <a href="#" class="w_50p f_right bb">
                     <img src="images/cp2.jpg" alt=""></a>
                     <a href="#" class="w_50p f_right">
                     <img src="images/cp3.jpg" alt=""></a>
                 </div>
             </section>
             <section class="jd_product_box">
                <div class="tit">
                    <h3>京东自营</h3>
                </div>
                <div class="con clearFix">
                    <a href="#" class="w_50p f_right bl">
                    <img src="images/cp4.jpg" alt=""></a>
                    <a href="#" class="w_50p f_left bb">
                    <img src="images/cp5.jpg" alt=""></a>
                    <a href="#" class="w_50p f_left">
                    <img src="images/cp6.jpg" alt=""></a>
                </div>
            </section>
            <section class="jd_product_box">
                <div class="tit">
                    <h3>京东热门</h3>
                </div>
                <div class="con clearFix">
                    <a href="#" class="w_50p f_left br">
                        <img src="images/cp1.jpg" alt=""></a>
                        <a href="#" class="w_50p f_right bb">
                        <img src="images/cp2.jpg" alt=""></a>
                        <a href="#" class="w_50p f_right">
                        <img src="images/cp3.jpg" alt=""></a>
                </div>
            </section>
         </div>
     </div>
     <section src="js/common.js"></section>
     <section src="js/index.js"></section>
</body>
</html>
